<template>
    <el-drawer v-model="drawer" :with-header="false" size="20%" @closed="handleClose">
        <el-divider content-position="left">
            申请详情
        </el-divider>
        <div class="up">
            <el-scrollbar height="400px">
                <el-form label-position="left" label-width="100px" style="padding: 0 20px">
                    <el-form-item label="申请编号">
                        <el-text>{{ claim.claimId }}</el-text>
                    </el-form-item>
                    <el-form-item label="物资名称">
                        <el-text>{{ claim.goodsName }}</el-text>
                    </el-form-item>
                    <el-form-item label="物资图片">
                        <el-image
                                :preview-src-list="[`/api/images/${claim.picture}`]"
                                :src="`/api/images/${claim.picture}`"
                                :zoom-rate="1.2"
                                fit="cover"
                                style="width: 100px; height: 100px"
                        />
                    </el-form-item>
                    <el-form-item label="申请数量">
                        <el-text>{{ claim.claimNumber }}</el-text>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-text v-if="claim.number as number >= 50">{{ claim.number }}</el-text>
                        <el-text v-else type="danger">{{ claim.number }}</el-text>
                    </el-form-item>
                    <el-form-item label="物资规格">
                        <el-text>{{ claim.specification }}</el-text>
                    </el-form-item>
                    <el-form-item label="需求人">
                        <el-text>{{ claim.uname }}</el-text>
                    </el-form-item>
                    <el-form-item label="房间编号">
                        <el-text>{{ claim.name }}号房间</el-text>
                    </el-form-item>
                    <el-form-item label="申请人">
                        <el-text v-if="claim.username">{{ claim.username }}</el-text>
                        <el-text v-else>{{ claim.uname }}</el-text>
                    </el-form-item>
                    <el-form-item label="申请时间">
                        <el-text>{{ dealDateTime(claim.createTime as string) }}</el-text>
                    </el-form-item>
                    <el-form-item label="处理状态">
                        <el-tag v-if="claim.status === '同意'">{{ claim.status }}</el-tag>
                        <el-tag v-else-if="claim.status === '拒绝'" type="info">{{ claim.status }}</el-tag>
                        <el-tag v-else type="warning">{{ claim.status }}</el-tag>
                    </el-form-item>
                    <el-form-item label="回复">
                        <el-text>{{ claim.reply }}</el-text>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-text>{{ claim.remark }}</el-text>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <div class="down" style="padding: 0 20px">
            <el-divider>
                <el-icon>
                    <EditPen/>
                </el-icon>
            </el-divider>
            <el-form ref="formRef" :model="form" :rules="rules" hide-required-asterisk label-position="left"
                     label-width="100px">
                <el-form-item label="申请数量">
                    <el-input-number v-model="form.claimNumber" :min="1" style="width: 100%"/>
                </el-form-item>
                <el-form-item label="申请状态" prop="status">
                    <el-select v-model="form.status" placeholder="请输入处理意见" style="width: 100%">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="回复内容" prop="reply">
                    <el-input v-model="form.reply" :placeholder="BaseConfig.defaultText" autosize maxlength="200"
                              show-word-limit
                              type="textarea"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div style="flex: auto">
                <el-button :disabled="claim.status === '同意'" type="primary" @click="submit(formRef)">提交</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { ClaimDto, DealClaim } from '@/ts/type/Claim'
import { EventBus } from '@/utils/mitt'
import { EditPen } from '@element-plus/icons-vue'
import { rules, twoOptions } from '@/config/formConfig'
import { BaseConfig } from '@/config/config'
import { Message, Notification } from '@/plugins/element'
import { FormInstance } from 'element-plus'
import ClaimService from '@/api/claimApi'
import { dealDateTime } from '@/utils/commonUtils'

const options = twoOptions
const form = ref<DealClaim>({})
const claim = ref<ClaimDto>({})
const drawer = ref(false)
const formRef = ref<FormInstance>()
const handleClose = () => {
  form.value = {}
  claim.value = {}
}

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      const a: number = form.value.claimNumber as number // 申请数量
      const b: number = claim.value.number as number // 库存数量
      if (a > b && form.value.status === '同意') return Message.error('库存量不够，请重新选择数量')
      ClaimService.putDealClaim(form.value).then(async res => {
        const { message } = res
        await EventBus.emit('searchClaim', { bool: false })
        drawer.value = false
        Notification.success(message)
      })
    } else {
      Message.error('请正确输入内容')
    }
  })
}

EventBus.on('claimDrawer', res => {
  const { bool, ClaimDtoVal } = res
  drawer.value = bool
  claim.value = ClaimDtoVal
  form.value.claimId = ClaimDtoVal.claimId
  form.value.claimNumber = ClaimDtoVal.claimNumber
  form.value.goodsId = ClaimDtoVal.goodsId
})
</script>

<style lang='scss' scoped>
.up {
  display: flex;
  flex-direction: column;
  flex: auto;

  .el-form-item {
    margin-bottom: 0;
    line-height: 1.5em;
  }
}

.down {
  margin-top: 10px;
}
</style>